import { useNavigate } from 'react-router-dom';

import HomeLayout from '@/business/HomeLayout';
import LoginModal from '@/business/LoginModal';
import RyButton from '@/business/RyButton';
import Image from '@/components/Image';

import arrow from './images/arrow.svg';
import icon1 from './images/icon1.svg';
import icon2 from './images/icon2.svg';
import icon3 from './images/icon3.svg';
import icon4 from './images/icon4.svg';
import classes from './index.module.less';

const infoList = [
  {
    icon: icon1,
    label: '一键文生图',
    borderColor: 'rgba(233, 52, 157, 0.12)',
    background: 'rgba(233, 52, 157, 0.10)',
  },
  {
    icon: icon2,
    label: '超高绘画质量',
    borderColor: 'rgba(35, 130, 245, 0.12)',
    background: 'rgba(35, 130, 245, 0.10)',
  },
  {
    icon: icon3,
    label: '海量风格选择',
    borderColor: 'rgba(20, 239, 248, 0.12)',
    background: 'rgba(20, 239, 248, 0.10)',
  },
  {
    icon: icon4,
    label: '新用户送 6 张绘画券',
    borderColor: 'rgba(21, 224, 118, 0.12)',
    background: 'rgba(21, 224, 118, 0.10)',
  },
];
const Home = () => {
  const navigator = useNavigate();
  return (
    <HomeLayout className={classes.wrap}>
      <div className={classes.infoTip}>
        <div className={classes.infoText}>
          <div>魔镜 AI 绘画</div>
          <div>让每个人都可以</div>
        </div>
        <div className={classes.infoMyTip}>成为画家</div>
      </div>
      <div className={classes.itemWrap}>
        {infoList.map((item) => (
          <div key={item.label} className={classes.item}>
            <div
              className={classes.itemIcon}
              style={{
                background: item.background,
                borderColor: item.borderColor,
              }}
            >
              <Image src={item.icon} className={classes.img}></Image>
            </div>
            {item.label}
          </div>
        ))}
      </div>
      <div className={classes.btnWrap}>
        <LoginModal dataModule="首页" dataEvent="去创作">
          <RyButton
            className={classes.btn}
            onClick={() => {
              navigator('/creation', { replace: true });
              // Taro.switchTab({ url: '/pages/creation/index' });
            }}
          >
            去创作<Image src={arrow} className={classes.btnArrow}></Image>
          </RyButton>
        </LoginModal>
      </div>
    </HomeLayout>
  );
};

export default Home;
